<template>
	<div>
		<!-- 3.访问共享数据，此时不需要使用$store -->
		<p>add组件中访问vuex中的数据:{{count}}-----{{msg}}</p>
		<!-- 访问共享数据中getter定义的计算属性 this.$store.getters.属性名 -->
		<p>{{$store.getters.showYe}}</p>
		<button @click="add1">加</button>
		<button @click="add5(5)">加5</button>
		<button @click="xg(['a','b','c'])">异步修改data中数据s</button>
		<p>{{data}}</p>
	</div>
</template>

<script>
	//组件中访问共享数据的第二种方式
	//1.导入mapState函数

	import {
		mapState
	} from 'vuex'
	export default {
		data() {
			return {}
		},
		//将共享数据映射成计算属性，相当于这个共享数据是当前组件的一个计算属性
		computed: {
			...mapState(['count', 'msg', 'data'])
		},
		methods: {
			add1() {
				//触发mutations中的方法实现count的加1操作
				this.$store.commit('addOne')
			},
			add5(n) {
				this.$store.commit('addN', n)
			},
			xg(n) {
				this.$store.dispatch('changeAsync',n )
			}
		}
	}
</script>

<style>
</style>